<template>
	<div class="warp">
		<iCard></iCard>
		<div class="container">
			<div class="dropdown-divider pt"></div>
			<div class="row p-content">
				<div class="col-md-3">
					<div class="about">
						<h3 style="padding-bottom: 25px;font-size: 18px;font-weight: bold;">About</h3>
						<div class="a-detail">
							<p>Naomi Neo is a well-known name in the blogging and influencer industry and has a wikipage dedicated to her. She started blogging professionally in 2011 and has been uploading YouTube videos since 2012. </p>
							<p>She has worked with brands like Benefit, SKII, Superga and between 2014 to 2015, Naomi was a selected ambassador for Sunsilk. </p>
							<p>Naomi Neo studied at Damai Secondary School. She furthered her studies at Nanyang Academy of Fine Arts, graduating with a diploma in Arts Management in 2016. </p>
							<p>Naomi Neo is very popular at events as well and might be the only KOL to get her own </p>
							
						</div>
						<h3 class="a-title">Skills & occupation</h3>
						<div class="skills">
							<tag v-for="item in skills" :tagName="item.name" :key="item.id"></tag>
						</div>
						<h3 class="a-title">Industry & expertise</h3>
						<div class="industry">
							<tag v-for="item in industry" :tagName="item.name" :key="item.id"></tag>
						</div>
						<h3 class="a-title">Business Type</h3>
						<div class="industry">
							<tag v-for="item in business" :tagName="item.name" :key="item.id"></tag>
						</div>
						<h3 class="a-title">Language</h3>
						<div class="industry">
							<tag v-for="item in language" :tagName="item.name" :key="item.id"></tag>
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="servies">
						<img src="../../assets/images/p-person.png" alt="" class="img-fluid">
						<div class="s-cont">
							<p class="name">@naomineo_</p>
							<p>Celebrities & Influencers</p>
							<p>Instagram Photo</p>
							<p class="country">USD 1,614</p>
							<p>Cost per View <span class="cost-view">USD 0</span></p>
							<p>Guaranteed Views <span class="views">200,000</span></p>
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="servies">
						<img src="../../assets/images/p-person11.png" alt="" class="img-fluid">
						<div class="s-cont">
							<p class="name">@naomineo_</p>
							<p>Celebrities & Influencers</p>
							<p>Instagram Photo</p>
							<p class="country">USD 1,614</p>
							<p>Cost per View <span class="cost-view">USD 0</span></p>
							<p>Guaranteed Views <span class="views">200,000</span></p>
						</div>
					</div>

				</div>
				<div class="col-md-3">
					<div class="servies">
						<img src="../../assets/images/p-person22.png" alt="" class="img-fluid">
						<div class="s-cont">
							<p class="name">@naomineo_</p>
							<p>Celebrities & Influencers</p>
							<p>Instagram Photo</p>
							<p class="country">USD 1,614</p>
							<p>Cost per View <span class="cost-view">USD 0</span></p>
							<p>Guaranteed Views <span class="views">200,000</span></p>
						</div>
					</div>

				</div>
			</div>
			<!-- 下面的按钮 -->
			<div class="row">
				<div class="col-md-12">
					<div class="btn-item">
						<div class="btn-create">
							<span>1</span>
							<button type="button" class="btn btn-primary btn-lg btn-prm" data-toggle="modal" data-target="#myModal">
								<img src="../../assets/images/btn-create.png" alt="">
							</button>
							<!-- Modal -->
							<!-- Modal -->
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
								<div class="modal-dialog" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel">Post Public Brief/Job</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true">&times;</i></button>
										</div>
										<div class="text">
											<p style="padding: 5px 0 0 15px;">Tell the creator what you want them to do & include references.</p>
										</div>
										<div class="modal-body">
											<form accept-charset="UTF-8">
												<div class="form-group">
													<label for="products">产品</label>
													<input type="text" class="form-control" id="products" placeholder="Client Name - Project Name - Date">
												</div>
												<!--  -->
												<div class="form-group">
													<label for="tuiguang">推广目标</label>
													<select name="industy" class="form-control" id="tuiguang">
														<option>直播带货</option>
													</select>
												</div>
							
												<!-- 发布平台 -->
												<p>发布平台</p>
												<div class="platform d-flex">
													<div>
														<div class="form-group">
															<div class="form-check form-check-inline">
																<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
																<label class="form-check-label" for="inlineCheckbox1">
																	Tik Tok
																</label>
															</div>
														</div>
														<div class="form-group">
															<div class="form-check form-check-inline">
																<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
																<label class="form-check-label" for="inlineCheckbox1">
																	Facebook
																</label>
															</div>
														</div>
													</div>
													<!--  -->
													<div class="platform-right">
														<div class="form-group">
															<div class="form-check form-check-inline">
																<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
																<label class="form-check-label" for="inlineCheckbox1">
																	Google
																</label>
															</div>
														</div>
														<div class="form-group">
															<div class="form-check form-check-inline">
																<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
																<label class="form-check-label" for="inlineCheckbox1">
																	Pinteret
																</label>
															</div>
														</div>
													</div>
													<!--  -->
												</div>
												<!-- 发布平台 end -->
												<!-- 预算计价 -->
												<div class="d-flex justify-content-between from-item-hope">
													<div class="form-group">
														<label for="yusuan">预算计价</label>
														<input type="text" class="form-control" id="yusuan">
													</div>
													<div class="form-group">
														<label for="fujia">附加出价</label>
														<input type="text" class="form-control" id="fujia">
													</div>
												</div>
												<!-- 预算计价 end -->
							
												<!-- 是否需要版权-->
												<div class="d-flex justify-content-between from-item-hope">
													<div class="form-group">
														<label for="tv-copyright">是否需要视频版权</label>
														<select name="industy" class="form-control" id="tv-copyright">
															<option>否</option>
															<option>是</option>
														</select>
													</div>
													<div class="form-group">
														<label for="h-date">期望交期</label>
														<select name="industy" class="form-control" id="h-date">
															<option>付款后10天</option>
															<option>付款后5天</option>
														</select>
													</div>
												</div>
												<!-- KOl end -->
												<div class="form-group" style="width: 45%;">
													<label for="t-style">推广形式</label>
													<select name="industy" class="form-control" id="t-style">
														<option>付款后10天</option>
														<option>付款后5天</option>
													</select>
												</div>
												<!--  -->
											</form>
										</div>
										<div class="modal-footer">
											<div class="add-avator">
												<img src="../../assets/images/redadd.png" alt="">
												<img src="../../assets/images/avator1.png" alt="">
												<img src="../../assets/images/avator2.png" alt="">
											</div>
											<button type="button" class="btn btn-danger">Save changes</button>
										</div>
									</div>
								</div>
							</div>
							<!-- model end -->
							<!--  -->
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import iCard from '@/components/person/iCard.vue'
	import tag from '@/components/person/tag.vue'
	export default {
		data() {
			return {
				skills: [
					{id:1,name: 'Influencer'},
					{id:2,name:'Instagram Influncer'},
					{id:3,name:'You Tube Content Creator'},
					{id:4,name:'Blogger'}
				],
				industry: [
					{id:1,name: 'Influencer'},
					{id:2,name:'Instagram Influncer'},
					{id:3,name:'Parenting & Education'},
				],
				business:[
					{id:1,name: 'Individual'},
				],
				language:[
					{id:1,name: 'Eanglish'},
				],
			}
		},
		components: {
			iCard,
			tag
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.pt {
		margin-top: 40px;
	}
	
	.btn-create input{
		font-size: 14px;
	}
	
	.p-content {
		padding-top: 50px;
	}
	
	.servies img{
		border-radius: 5px;
	}
	.s-cont {
		line-height: 24px;
		display: flex;
		flex-direction: column;

		p {
			// margin-bottom: 5px;
			font-size: 14px;
			span {
				color: #F15D46;
			}
		}

		.name {
			font-size: 18px;
			margin-top: 22px;
		}

		.country {
			color: #F15D46;
			padding-top: 30px;
		}
	}

	.btn-item {
		display: flex;
		justify-content: center;
	}
	.a-detail p{
		padding-bottom: 27px;
		line-height: 20px;
		color: #808080;
		font-size:14px;
	}
	.a-title{
		font-size: 18px;
		padding-top: 40px;
		padding-bottom: 15px;
		font-weight: bold;
	}
	.btn-create {
		height: 39.583px;
		position: relative;
		width: 278.29px;
		margin-top: 20px;
		margin-bottom: 46px;

		span {
			position: absolute;
			top: -8px;
			left: -39px;
			background-color: orangered;
			width: 40px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			color: #fff;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			z-index: 5;
		}

		img {
			display: block;
			width: 100%;
			height: 39.583px;
			position: absolute;
			left: 0;
			top: -8px;
		}
	}
	
	@media screen and(max-width:758px){
		.btn-create {
			text-align: center;
			span {
				height: 39.58px;
			}
		}
		.btn-item {
			padding-left: 35px;
		}
		.servies{
			padding-top: 10px;
		}
		.servies img{
			display: inline-block;
			width: 100%;
		}
	}
</style>
